<template>
  <div>
    <div class="basic">
      <div class="info">基本信息{{id}}</div>
      <div class="name">
        <span>商户名称</span>
        <span style="width:50%;">{{0 !==1 ? '北京凯迪克格兰云天大酒店有限公司': '/'}}</span>
      </div>
      <div class="name">
        <span>商户PID</span>
        <span>{{0 !==1 ? '2088631345150101': '/'}}</span>
      </div>
      <div class="name">
        <span>当面付费率</span>
        <span style="width:200px;">暂未开通 
          <span 
            style="color:#358CF0;margin-left:15px;"
            @click="showModal"
          >点击立即开通</span>
        </span>
        <!-- <span>0.60%</span> -->
      </div>
      <div class="name">
        <span>预授权费率</span>
        <!-- <span style="width:200px;">暂未开通 
          <span style="color:#358CF0;margin-left:15px;">点击立即开通</span>
        </span> -->
        <span>0.60%</span>
      </div>
    </div>
    <div class="basic" style="border-bottom:0px;">
      <div class="info" style="margin-top:15px;">支付设置</div>
      <a-row>
        <a-col span="8">
          <div class="commom-flex" style="border-top:1px solid #EBEEF5;margin-top:14px;background:#EBEEF5;">
            <div>当面付收款</div>
            <div><a-switch defaultChecked @change='onChange'/></div>
          </div>
          <!-- 分割线 -->
          <a-divider dashed />
          <div class="commom-flex">
            <div>远程普通支付</div>
            <div><a-switch defaultChecked @change='onChange'/></div>
          </div>
          <a-divider dashed />
          <div class="commom-flex" style="border-bottom:1px solid #EBEEF5">
            <div>远程普通支付方式</div>
            <div>
               <a-radio-group :options="plainOptions" @change="onChange1" :defaultValue="value1" />
            </div>
          </div>
        </a-col>
        <a-col span="8" style="margin-left:14px;">
          <div class="commom-flex" style="border-top:1px solid #EBEEF5;margin-top:14px;background:#EBEEF5;">
            <div>预授权收款</div>
            <div><a-switch defaultChecked @change='onChange'/></div>
          </div>
           <a-divider dashed />
           <div class="commom-flex">
            <div>预授权到期处理</div>
            <div>
               <a-radio-group :options="plainOptions" @change="onChange1" :defaultValue="value1" />
            </div>
          </div>
          <!-- 支付宝设置、微信没有 -->
          <div v-if=" id === '2'">
            <!-- 分割线 -->
            <a-divider dashed />
            <div class="commom-flex">
              <div>芝麻信用收款</div>
              <div><a-switch defaultChecked @change='onChange'/></div>
            </div>
            <a-divider dashed />
            <div class="commom-flex">
              <div>远程预授权</div>
              <div><a-switch defaultChecked @change='onChange'/></div>
            </div>
            <a-divider dashed />
            <div class="commom-flex" style="border-bottom:1px solid #EBEEF5">
              <div>远程普通支付方式</div>
              <div>
                <a-radio-group :options="plainOptions" @change="onChange1" :defaultValue="value1" />
              </div>
            </div>
          </div>
          <a-divider dashed />
          <div class="commom-flex">
            <div>追加结算功能</div>
            <div><a-switch defaultChecked @change='onChange'/></div>
          </div>
          <a-divider dashed />
          <div class="commom-flex" style="border-bottom:1px solid #EBEEF5">
            <div>追加结算时长</div>
            <div>
              <a-input style="width:75px;"></a-input>
              <span style="margin-left:3px;">分钟</span> 
            </div>
          </div>
        </a-col>
      </a-row>
    </div>
    <div class="btn-save"> 
      <a-button type="primary">保存设置</a-button>
    </div>

    <!-- 开通弹窗 -->
    <a-modal
      title="开通服务"
      v-model="visible"
      width="800px"
    >
      <div slot="footer">
        <a-button type="primary" @click="nextStep">下一步</a-button>
      </div>
      <div class="sever-title">您即将开通
        <span>支付宝当面付</span>服务，请按提示进行操作。官方费率为 
        <span>0.6%</span>（我们将与对接酒店的BD核实具体费率）
      </div>
      <div class="sever-sel" style="text-align:center">
        <a-radio-group :options="plainOption" @change="getAlipayNum" :defaultValue="hasAlipay" />
      </div>
      <div class="server-tip"> 
        <img src="../../../../assets/imgs/ic_attention.png" alt=""> 
        建议自行申请支付宝账号后再开通该服务 
      </div>
    </a-modal>

    <!-- 开通步骤支付宝有账户 -->
    <a-modal
      title="开通服务1"
      v-model="isStepShow1"
      @ok="handleOk"
      width="820px"
      :footer=" inCurrent1 < 2? footer : null"
    >
      <div slot="footer" style="padding:10px;" >
        <a-button @click="before">上一步</a-button>
        <a-button type="primary" @click="next">下一步</a-button>
      </div>
      <stepone-item :hasAlipay="hasAlipay" :inCurrent1="inCurrent1"  />
    </a-modal>

    <!-- 开通步骤支付宝无账户 -->
    <a-modal
      title="开通服务2"
      v-model="isStepShow2"
      @ok="handleOk"
      width="820px"
      :footer=" inCurrent2 < 2? footer : null"
    >
      <div slot="footer" style="padding:10px;" >
        <a-button @click="before">上一步</a-button>
        <a-button type="primary" @click="next">下一步</a-button>
      </div>
      <stepone-item :hasAlipay="hasAlipay" :inCurrent2="inCurrent2" />
    </a-modal>

    <!-- 开通步骤微信 -->
    <a-modal
      title="开通服务3"
      v-model="isStepShow3"
      @ok="handleOk"
      width="820px"
      :footer=" inCurrent3 < 2? footer : null"
    >
      <div slot="footer" style="padding:10px;" >
        <a-button>上一步</a-button>
        <a-button type="primary" @click="wxNext">下一步</a-button>
      </div>
      <stepone-item :hasAlipay="3" :inCurrent3="inCurrent3" />
    </a-modal>
  </div>
</template>
<script>
import SteponeItem from './SteponeItem'
const plainOptions = ['网页模式', '小程序模式']
const plainOption = [{value: 1, label: '有支付宝账号'}, {value:2, label: '无支付宝账号'}]
export default {
  // props: [ 'key' ],
  props: {
    id: {
      type: String,
      default: '1'
    }
  },
  components: {
    SteponeItem
  },
  data () {
    return {
      plainOptions,
      plainOption,
      value1: '网页模式',
      // 是否有支付宝账号，默认为2没有账号
      hasAlipay: 2,
      // 服务开通弹窗
      visible: false,
      // 开通步骤弹窗
      isStepShow1: false,
      isStepShow2: false,
      isStepShow3: false,
      inCurrent: 0,
      inCurrent1: 0,
      inCurrent2: 0,
      inCurrent3: 0,
    }
  },
  methods: {
    onChange(checked){
      window.console.log(`a-switch to ${checked}`);
    },
    // 获取有无支付宝账号
    getAlipayNum (e) {
      this.hasAlipay = e.target.value;
    },
    onChange1 (e) {
      this.hasAlipay = e.target.value;
    },
    showModal() {
      if(this.id === '2') {
        this.visible = true
      }else if(this.id === '3') {
        this.isStepShow3 = true
      }
    },
    showModal1() {
      this.isStepShow = true
    },
    after() {
      window.console.log(`a-switch wwwwwww`);

    },
    handleOk(e) {
      window.console.log(e);
      this.visible = false
    },
    // 下一步
    nextStep() {
      // 关闭开通服务
      this.visible = false;
      // 打开开通步骤
      if(this.hasAlipay === 1) {
        this.isStepShow1 = true
      }else{
        this.isStepShow2 = true
      }

    },
    // 支付宝步骤上一步
    before() {
      if(this.hasAlipay === 1) {
        if(this.inCurrent1 > 0) {
          this.inCurrent1 -= 1 ;
        }else{
          this.isStepShow1 = false;
          this.visible = true;
        }
        // this.inCurrent1 = 3;
      }else if(this.hasAlipay === 2) {
        if(this.inCurrent2 > 0) {
          this.inCurrent2 -= 1 ;
        }else{
          this.isStepShow2 = false;
          this.visible = true;
        }
      }
    },
    // 支付宝步骤下一步
    next() {
      if(this.hasAlipay === 1) {
        this.inCurrent1 += 1;
        // this.inCurrent1 = 3;
      }else if(this.hasAlipay === 2) {
        this.inCurrent2 += 1;
      }
    },
    // 微信步骤下一步
    wxNext(){
      this.inCurrent3 += 1;
    }
  },
}
</script>
<style lang="less" scoped>
/deep/ .ant-divider-horizontal {
  margin: 0;
}
.basic {
  border-bottom: 1px solid #EBEEF5;
  padding-bottom: 25px;
  font-size: 14px;
  .info {
    color: #333333;
    font-size: 16px;
  }
 
  .name {
    margin-top: 20px;
    span {
      display: inline-block;
      width: 90px;
    }
  }
  .commom-flex {
    border: 1px solid #EBEEF5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    box-sizing: border-box;
    border-bottom: 0px ;
    border-top: 0px ;
  }
}
  .btn-save {
    text-align: right;
  }
  .sever-title {
    text-align: center;
    span {
      color: #F6772D;
    }
  }
  .sever-sel {
    text-align:center;
    margin-top: 80px;
  }
  .server-tip {
    text-align:center;
    margin: 11px 0 100px 0;
    img {
      width: 17px;
      height: 17px;
      vertical-align: middle;
    }
  }
</style>